'use strict';

import React, {Component, PropTypes} from 'react';
import {Button, Close} from 'amazeui-react';
import {Http} from '../lib';
import {API} from '../res';

export default class Uploader extends Component {
	/*
	 * 构造函数。
	 * @param props 属性
	 */
	constructor(props) {
		super(props);
		this.state = {
			files: this.props.defaultValue ? this.props.defaultValue.split(',') : [],
		};
	}

	/*
	 * 获取选中文件。
	 * @return 返回已选择的文件
	 */
	getValue() {
		return this.state.files.toString();
	}

	/*
	 * 校验文件格式。
	 * @param filename 文件名
	 * @return 通过返回true，失败返回false
	 */
	validate(filename) {
		let regex = new RegExp(`\.(${this.props.types})$`, 'i');
		return regex.test(filename);
	}

	/*
	 * 检验文件是否存在。
	 * @param filename 文件名
	 * @return 存在返回true，不存在返回false
	 */
	isExisted(filename) {
		let files = this.state.files;
		let result = false;
		for (let i = 0; i < files.length; i++) {
			if (files[i] === filename) {
				result = true;
				break;
			}
		}

		return result;
	}

	/*
	 * 添加文件。
	 * @param filename 文件名
	 */
	addFile(filename) {
		let files = this.state.files;
		files.push(filename);
		this.setState({
			files: files,
		});
	}

	/*
	 * 删除文件。
	 * @param index 索引
	 */
	deleteFile(index) {
		let files = this.state.files;
		files.splice(index, 1);
		this.setState({
			files: files,
		});
	}

	/*
	 * 清空选择器。
	 */
	clear() {
		this.refs.file.value = '';
	}

	/*
	 * 上传文件。
	 * @param param 参数
	 */
	upload(param) {
		Http.post(API.upload, param, data => {
			this.addFile(data.data[0]);
		});
	}

	/*
	 * 点击时。
	 * @param e 事件
	 */
	handleClick(e) {
		this.refs.file.click();
	}

	/*
	 * 处理改变文件。
	 */
	handleChangeFile() {
		let files = this.refs.file.files;
		for (let i = 0; i < files.length; i++) {
			if (!this.validate(files[i].name)) {
				alert('Oops...不支持' + files[i].name);
			} else if (!this.isExisted(files[i])) {
				let param = {};
				param[i] = files[i];
				this.upload(param);
			}
		};

		this.clear();
	}

	/*
	 * 渲染。
	 */
	render() {
		let files = this.state.files;
		let list = files.map((x, i) => {
			return(
				<div key={i}>
					<a href={API.uploads + x}>{x}</a>
					<Close 
						spin
						icon
						onClick={e => {
							this.deleteFile(i);
						}}
						className="am-margin-left"
					/>
				</div>
			);
		});

		return (
			<div className="am-margin-vertical-sm">
				<input 
					type="file"
					ref="file"
					style={{
						display: 'none',
					}}
					onChange={this.handleChangeFile.bind(this)}
					multiple
				/>
				<Button
					onClick={this.handleClick.bind(this)}
				>{this.props.children}</Button>
				{list}
			</div>
		);
	}
}

Uploader.propTypes = {
	types: PropTypes.string,
	defaultValue: PropTypes.string,
};
Uploader.defaultProps = {
	types: '',
};
